<template>
  <div v-loading="loading">
    <a-form-model ref="wechatForm" :rules="wechatRules" :model="wechatInfo" :labelCol="{ span: 3 }" :wrapperCol="{ span: 12 }">
      <a-form-model-item label="下级店铺别名" prop="lowerLevelShop">
        <a-input v-model="wechatInfo.lowerLevelShop" type="text" />
      </a-form-model-item>
      <a-form-model-item label="下级店铺图标" prop="lowerLevelShopIcon">
        <div class="upload-box">
          <div class="self-com">
            <cyyUpdate
             @uploadSuccess="successShop"
              :imgSrc="wechatInfo.lowerLevelShopIcon">

            </cyyUpdate>
          </div>
        </div>
        <div style="color: rgba(0, 0, 0, 0.45)">建议尺寸100 * 100</div>
      </a-form-model-item>
      <a-form-model-item label="续费订单别名" prop="renewOrder">
        <a-input v-model="wechatInfo.renewOrder" type="text" />
      </a-form-model-item>
      <a-form-model-item label="续费订单图标" prop="renewOrderIcon">
        <div class="upload-box">
          <div class="self-com">
            <cyyUpdate
            @uploadSuccess="successReorder"
              :imgSrc="wechatInfo.renewOrderIcon">

            </cyyUpdate>
          </div>
        </div>
        <div style="color: rgba(0, 0, 0, 0.45)">建议尺寸100 * 100</div>
      </a-form-model-item>
      <a-form-model-item label="提现别名" prop="Withdrawal">
        <a-input v-model="wechatInfo.Withdrawal" type="text" />
      </a-form-model-item>
      <a-form-model-item label="提现图标" prop="WithdrawalIcon">
        <div class="upload-box">
          <div class="self-com">
            <cyyUpdate
            @uploadSuccess="successWith"
              :imgSrc="wechatInfo.WithdrawalIcon">

            </cyyUpdate>
          </div>
        </div>
        <div style="color: rgba(0, 0, 0, 0.45)">建议尺寸100 * 100</div>
      </a-form-model-item>
      <a-form-model-item label="佣金明细别名" prop="commissionDetail">
        <a-input v-model="wechatInfo.commissionDetail" type="text" />
      </a-form-model-item>
      <a-form-model-item label="佣金明细图标" prop="commissionDetailIcon">
        <div class="upload-box">
          <div class="self-com">
            <cyyUpdate
            @uploadSuccess="successComm"
              :imgSrc="wechatInfo.commissionDetailIcon">

            </cyyUpdate>
          </div>
        </div>
        <div style="color: rgba(0, 0, 0, 0.45)">建议尺寸100 * 100</div>
      </a-form-model-item>
      <a-form-model-item label="提现记录别名" prop="WithdrawalLog">
        <a-input v-model="wechatInfo.WithdrawalLog" type="text" />
      </a-form-model-item>
      <a-form-model-item label="提现记录图标" prop="WithdrawalLogIcon">
        <div class="upload-box">
          <div class="self-com">
            <cyyUpdate
            @uploadSuccess="successWithLog"
              :imgSrc="wechatInfo.WithdrawalLogIcon">

            </cyyUpdate>
          </div>
        </div>
        <div style="color: rgba(0, 0, 0, 0.45)">建议尺寸100 * 100</div>
      </a-form-model-item>
      <a-form-model-item label="店铺订单别名" prop="shopOrder">
        <a-input v-model="wechatInfo.shopOrder" type="text" />
      </a-form-model-item>
      <a-form-model-item label="店铺订单图标" prop="shopOrderIcon">
        <cyyUpdate
         @uploadSuccess="successShopOrder"
          :imgSrc="wechatInfo.shopOrderIcon"
        >

        </cyyUpdate>
      </a-form-model-item>

      <a-form-model-item :wrapper-col="{ span: 12, offset: 2 }">
        <a-button :loading="btnLoading" type="primary" @click="submitForm">
          保存
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
import { setAgencyConfig, getAgencyConfig } from '@/api/saas/setting'
import cyyUpdate from "../../../components/CyyUi/UploadImg/index";
export default {
  name: 'SaasSettingAgency',
  data() {
    return {
      loading: false,
      btnLoading: false,
      wechatInfo: {
        lowerLevelShop:"",
        lowerLevelShopIcon:"",
        renewOrder:"",
        renewOrderIcon:"",
        Withdrawal:"",
        WithdrawalIcon:"",
        commissionDetail:"",
        commissionDetailIcon:"",
        WithdrawalLog:"",
        WithdrawalLogIcon:"",
        shopOrder:"",
        shopOrderIcon:"",
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      },
    }
  },
  components:{
    cyyUpdate
  },
  created () {
    this.getData()
  },
  methods: {
    successShop(e) {
      this.wechatInfo.lowerLevelShopIcon = e.data;
    },
    successReorder(e) {
      this.wechatInfo.renewOrderIcon = e.data;
    },
    successWith(e) {
      this.wechatInfo.WithdrawalIcon = e.data;
    },
    successComm(e) {
      this.wechatInfo.commissionDetailIcon = e.data;
    },
    successWithLog(e) {
      this.wechatInfo.WithdrawalLogIcon = e.data;
    },
    successShopOrder(e) {
      this.wechatInfo.shopOrderIcon = e.data;
    },
    getData() {
      this.loading = true;
      let that = this;
      getAgencyConfig().then((res)=>{
        if (res.code === 0) {
          that.$nextTick(() => {
            that.wechatInfo = res.data
          })
        }
        console.log(that);
      }).catch(error => {
        console.log(error)
      }).then(() => {
        this.loading = false
      })
    },
    submitForm: function () {
      this.btnLoading = true;
      setAgencyConfig(this.wechatInfo).then(res => {
        if (res.code == 0) {
          this.$message.success('保存成功！')
        } else {
          this.$message.warning(res.msg ? res.msg : '保存失败！')
        }
      }).catch(error => {
        console.log(error)
      }).then(() => {
        this.btnLoading = false
      })
    }
  }
}
</script>